<template>
        <div class="app-container">
            <div class="app-content">
                 <div class="title">
                    客户销售分析
                </div>
               <el-form class="search-form" :inline="true" >
                <el-form-item >
                  <el-select v-model="value" placeholder="请选择日期">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item >
                  <el-input
                    v-model="customerName"
                    placeholder="请输入客户名称"
                    clearable
                    @keyup.enter.native="getCustomerProductStatistics"
                  />
                </el-form-item>
              
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search"   @click="getCustomerProductStatistics">搜索</el-button>
                </el-form-item>
              </el-form>
               <div class="data-box">
                
                  <div class="table-box">
                        <el-button class="export" size="small"  @click="handleExport"   v-hasPermi="['statistics:product:export']">导出</el-button>
                        <el-table
                        :data="list"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        max-height="500"
                        style="width: 100%;">
                        <el-table-column
                          prop="customerName"
                          label="客户名称">
                        </el-table-column>
                        <el-table-column
                          prop="cateName"
                          label="产品分类">
                        </el-table-column>
                        <el-table-column
                          prop="productName"
                          label="产品名称">
                        </el-table-column>
                        <el-table-column
                          prop="contractCount"
                          label="合同数">
                        </el-table-column>
                        <el-table-column
                          prop="saleCount"
                          label="销售数量">
                        </el-table-column>
                         <el-table-column
                          prop="saleMoney"
                          label="销售金额">
                        </el-table-column>
                         <el-table-column
                          prop="subtotal"
                          label="小计金额">
                        </el-table-column>
                     
                      </el-table>
                  </div>
                  
              </div>
            </div>
               
          </div>
</template>

<script>
 import { getCustomerProductStatistics,exportCustomerProduct } from "@/api/crm/statistics";
 
import echarts from 'echarts'
import resize from '../../dashboard/mixins/resize'
 

export default {

  name: 'Index',
    mixins: [resize],
  components: {  },
  data() {
    return {
      
       
       options: [{
          value: '1',
          label: '今天'
        }, {
          value: '2',
          label: '昨天'
        }, {
          value: '3',
          label: '本周'
        }, {
          value: '4',
          label: '上周'
        }, {
          value: '5',
          label: '本月'
        }
        , {
          value: '6',
          label: '上月'
        }
        , {
          value: '7',
          label: '本季度'
        }
        , {
          value: '8',
          label: '上季度'
        }
        , {
          value: '9',
          label: '本年'
        }
        , {
          value: '10',
          label: '上年'
        }],
        value: '5',
        customerName:undefined,
        list:[],
       
    }
  },
   created() {
      var that=this;
      setTimeout(function(){
          that.getCustomerProductStatistics()
      },500);
  },

  methods: {
    handleExport(){
        var data;
        if(this.customerName!=undefined){
            data={type:this.value,customerName:this.customerName}
        }
        else{
            data={type:this.value}
        }
        exportCustomerProduct(data).then((response) => {
           this.download(response.msg);
        });

    },
    getCustomerProductStatistics(){
          var data;
          if(this.customerName!=undefined){
              data={type:this.value,customerName:this.customerName}
          }
          else{
              data={type:this.value}
          }
          getCustomerProductStatistics(data).then((response) => {
           this.list=response.list;
           this.list.forEach((column, index) => {
              this.list[index].total=this.list[index].saleMoney*this.list[index].saleCount;
           })
             
        });
    },
     getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' ';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      }
       
  }
}
</script>

<style lang="scss" scoped>
.app-container{
    border: 1px solid #e6e6e6;
    padding: 12px;
    background-color: rgb(240, 242, 245);
    .app-content{
      background-color: white;
      .title{
        padding: 20px 30px 0px 30px;
        font-size: 18px;
        font-weight: bold;
        color: black;

      }
      .search-form{
        margin: 20px 30px 0px 30px;
      }
      .data-box{
        padding: 0px 30px 30px 30px;
        background-color:  rgb(255, 255, 255);
        height: 100%;
    
        .echart-box{
          margin: 0 auto;
          text-align: center;
        }
        .el-select{
          margin: 5px 10px;
        }
        .table-box{
          .export{
            float: right;
            margin: 10px 0px;
          }
        }
      }
    }
}
  #echart-customer{
    width:100%;
    height:320px
  }
.vue-treeselect{
  width: 217px;
  height: 36px;
}

</style>
